<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<style>
#selectHistoryLocationTime{
  width:280px;
}
.applyBtn {
    background-color: #449d44; 
}
.table-condensed th, .table-condensed td {
    padding: 4px 0px;
}
.div_temp_chart {
	border: 1px;
	 min-width: 33%;
	min-height: 300px; 
	float:left;
}

.div_s {
	border: 1px;
	min-width:22%;
	background-color: #F3F3F3;
	float:left;
	margin-bottom: 4%;
	height:230px;
}

.data_s {
	display: inline-block;
	text-align: left;
	min-width:40%;
}

.div_p {
	border: 1px;
	min-width: 42%;
	background-color: #F3F3F3;
	float:right;
	margin-bottom: 4%;
}

.data_p {
	display: inline-block;
	text-align: left;
}

.div_a {
	background-color: #F3F3F3;
	width: 100%;
	margin-bottom: 20px
}

.data_a {
	display: block;
	text-align: left;
	display:inline-block;
}

.data_table_td td {
	line-height: 40px;
	border-top: 0px;
}

.data_table_lab {
	font-family: '宋体';
	color: #666;
	font-weight: bold;
	font-size: 18px
}

.battery-info {
	margin-left:0px;
} 

.battery-info li h3{margin-bottom: 12px;margin: 0 0 12px 0;line-height: 1;}


</style>
<link type="text/css" rel="stylesheet" href="pages/monitor/css/packDataMonitor_detail.css" />
<div class="container-fluid">
				<!-- BEGIN PAGE HEADER-->
				<div class="row-fluid">
					<div class="span12">
						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<ul class="breadcrumb">
							<li>
								<!--<i class="icon-home"></i>-->
								<span class="c-999">监控管理</span> 
								<i class="icon-angle-right"></i>
							</li>
							<li>
								<a class="c-999" onclick="util.showContent('pages/monitor/packDataMonitor.jsp')">电池数据监控</a>
								<i class="icon-angle-right"></i>
							</li>
							<li>
								<span class="c-666">查看历史数据</span>
							</li>
						</ul>
					</div>
				</div>
						
						<!-- END PAGE TITLE & BREADCRUMB-->
						<!-- <div id = "packInfoDiv"> -->
                            <!-- 历史表数据 begin -->
							<div class="search-box">
								<div class="search-title">
									<span class="search-criteria c-666">&nbsp;查询条件</span>
								</div>
								<form id="">
									<table class="search-body" border="0" cellpadding="0"
										cellspacing="0" width="100%">
										<tr>
											<td>
											    <label class="my-label">
											    	开始时间： <input id="startTime" class="data-picker Wdate enterSearch" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"/>
											    </label>
											    <label class="my-label">
											    	结束时间：<input id="endTime" class="data-picker Wdate enterSearch" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"/>
											    </label> 
											 </td>
										</tr>
									</table>
								</form>
								<ul class="search-button">
									<li><button class="btn blue" id="btn_query">查&nbsp;&nbsp;询</button>
									</li>
									<li><button class="btn blue" id="btn_reset">重&nbsp;&nbsp;置</button>
									</li>
								</ul>
							</div>

							<div class="table-con" style="margin-bottom: 25px;">
									<div class="table-head">
										&nbsp;&nbsp;&nbsp;<i class="icon-reorder"></i>&nbsp;列表详情
									</div>
									<div class="list-body">
										<div class="table-responsive">
											<table class="table table-bordered table-striped table-hover"
												id="pack_monitor_history_table">
												<thead>
													<tr>
													    <th></th>
														<th style="min-width:90px">采集终端ID</th>
														<th class="fourMinWidth">电池ID</th>
														<th class="fourMinWidth">采集时间</th>
													</tr>
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div>
								</div>
                             <!-- 历史表数据 end -->
                        <!-- </div>  -->
				        <!--采集终端信息 str-->
				        <div id="packDetail">
				        <div id="detailInfo">
						<h2 class="main-title">电池监控实时信息</h2>
							 <ul class="battery-info">
							 	<li>
							 		<h3>电池ID</h3>
							 		<span id="PACK_CODE">QDLS201704270001</span>
							 	</li>
							 	<li>
							 		<h3>客户厂区</h3>
							 		<span id="FAC_NAME">石家庄叉车</span>
							 	</li>
							 	<li>
							 		<h3>连续运行时间</h3>
							 		<span id="RUN_TIME_SPAN">2415.32(H)</span>
							 	</li>
							 	<li>
							 		<h3>更新时间</h3>
							 		<span id="GATHER_TIME">2017-06-30 11:30</span>
							 	</li>
							 	<li>
							 		<h3>通信运营商</h3>
							 		<span id="CARRIER">中国移动</span>
							 	</li>
							 	<li>
							 		<h3>手机号</h3>
							 		<span id="SIM_PHONENO"></span>
							 	</li>
							 	<li>
							 		<h3>网络模式</h3>
							 		<span id="NETWORK_STANDARD">3G</span>
							 	</li>
							 	<li>
							 		<h3>GPS信号强度</h3> <strong id="gps"></strong>
							 		<div id="gpsNum" class="progress-bar"></div>
							 		<img src="pages/monitor/css/image/2.png"/>							 
							 	</li>
							 	<li class="active">
							 		<h3>GPRS信号强度</h3> <strong id="gprs"></strong>
							 		<div id="gprsNum" class="progress-bar"></div>
							 		<img src="pages/monitor/css/image/2.png"/>							 
							 	</li>
							 </ul>	
						<div class="battery-date" style="margin-bottom: 25px;">
							<div id="chartBox" class="relative">
								<span class="title">电池温度</span>
								<div id="chart" style="width: 362px; height: 310px;"></div>
							</div>
							<div class="date-box relative">
								<span class="title">电池实时数据</span>
								<div class="battery-item">
									<div id="battery-capacity" class="progress-bar">
										<span>52%</span>
									</div>
									<img src="pages/monitor/css/image/3.png"/>						
								</div>
								<ul>
									<li>
										<div class="item">
											<img src="pages/monitor/css/image/ico_dianliang.png"/>						
											<div class="right-side">
												<span>剩余电量</span> <strong id="SOC">55%</strong>
											</div>
										</div>
										<div class="item">
											<img src="pages/monitor/css/image/ico_dianya.png"/>						
											<div class="right-side">
												<span>总电压</span> <strong id="EL_VOL">52.6(V)</strong>
											</div>
										</div>
										<div class="item">
											<img src="pages/monitor/css/image/ico_zongdianliu.png"/>						
											<div class="right-side">
												<span>总电流</span>
												<strong id="EL_CURRENT">76.3(A)</strong>
											</div>
										</div>
									</li>
									<li>
										<div class="item">
											<img src="pages/monitor/css/image/ico_gaodianya.png"/>						
											<div class="right-side">
												<span>单体最高电压</span>
												<strong id="MAX_VOL_VAL">3.75(V)</strong>
											</div>
										</div>
										<div class="item">
											<img src="pages/monitor/css/image/ico_shangdian.png"/>						
											<div class="right-side">
												<span>上下电状态</span>
												<strong id="POWER_ON_STATUS">下电</strong>
											</div>
										</div>
										<div class="item last">
											<img src="pages/monitor/css/image/ico_wendugao.png"/>						
											<div class="right-side">
												<span>监测点最高温度</span>
												<strong id="MAX_TEMP_VAL">52.2(℃)</strong>
											</div>
										</div>
									</li>
									<li class="active">
										<div class="item">
											<img src="pages/monitor/css/image/ico_didianya.png"/>						
											<div class="right-side">
												<span>单体最低电压</span>
												<strong id="MIN_VOL_VAL">2.185(V)</strong>
											</div>
										</div>
										<div class="item">
											<img src="pages/monitor/css/image/ico_chongdian.png"/>						
											<div class="right-side">
												<span>是否在充电</span>
												<strong id="RUN_STATUS">是</strong>
											</div>
										</div>
										<div class="item">
											<img src="pages/monitor/css/image/ico_wendudi.png"/>						
											<div class="right-side">
												<span>监测点最低温度</span>
												<strong id="MIN_TEMP_VAL">48.9(℃)</strong>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>	 
						
						
						
						<!--tab页签 str-->
						<div class="tabbable tabbable-custom">
							<ul class="nav nav-tabs" id="tab_ul">
								<li class="active"><a href="#tab_1_1" data-toggle="tab">电池历史电压及监测点温度</a></li>
								<li><a href="#tab_1_2" data-toggle="tab">位置监控</a></li>
								<li><a href="#tab_1_3" data-toggle="tab">历史轨迹</a></li>
								<li><a href="#tab_1_4" data-toggle="tab">历史报警</a></li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="tab_1_1">
									<ul class="bar-box" id="minitor_pack_chart" style="height:auto;width:100% !important;min-width:500px;">
									</ul>
								</div>
								<div class="tab-pane" id="tab_1_2">
									<div class="bar-box" id="locaion_monitor_box">
									</div>
								</div>
								<div class="tab-pane" id="tab_1_3">
									<div style ="width: 100%;height: 590px;overflow-y: auto;overflow-x: hidden;" id="locaion_history_box">
									</div>
									<div style ="width: 100%;height: auto;overflow-y: auto;overflow-x: hidden;">
									<div id="history_toolbar" style="margin-top:5px;"><button type="button" class="btn blue" id="export_history" data-toggle="modal">导&nbsp;&nbsp;出</button></div>
										<table class="table table-bordered table-striped table-hover" id="history_location_table">
											<thead>
											  <tr>
											    <th></th>
												<th><div>记录时间</div></th>
												<th><div>位置</div></th>
											  </tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
								<div class="tab-pane" id="tab_1_4">
									<div class="portlet-body">
										<p>
											<button id="set_handled" type="button" class="btn green">标记处理</button>
											<button id="set_unneed_handled" type="button" class="btn red" >无需处理</button>
										</p>
									</div>
									<div style ="width: 100%;height: auto;overflow-y: auto;overflow-x: hidden;">
										<table class="table table-bordered table-striped table-hover" id="history_warning_table">
											<thead>
											  <tr>
											    <th class="sorting_asc_disabled" style="width:8px;"><input
													type="checkbox" class="group-checkable"
													data-set="#history_warning_table .checkboxes" />
												</th>
												<th>处理状态</th>
												<th>报警类别</th>
												<th>报警时间</th>
												<th>报警内容</th>
												<th>最后处理时间</th>
												<th>操作&nbsp;&nbsp;&nbsp;&nbsp;</th>
											  </tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
								
							</div> 
						</div>
						
									<div class="table-con bd-blue" style="margin-bottom: 25px;">
							<div class="table-responsive">
								<table class="table acquisition-terminal data_table_td" style="margin: 0;">
									<tr>
									    <td>
											<label><span class="data_table_lab">电池使用客户：</span><span id="CUS_NAME"></span></label>
										</td>
										<td>
											<label><span class="data_table_lab">采集终端ID：</span><span id="COL_CLIENT_ID"></span></label>
										</td>
										<td>
											<label><span class="data_table_lab">IMSI：</span><span id="IMSI" ></span></label>
										</td>
										<td >
											<label><span class="data_table_lab">GPS正在使用的卫星数量：</span><span id="GPS_NUM" ></span></label>
										</td>
									</tr>
									<tr>
									    <td>
											<label><span class="data_table_lab">电池系统型号：</span><span id="PACK_MODEL"></span></label>
										</td>
										<td>
											<label><span class="data_table_lab">地理位置：</span><span id="ADDRESS"></span></label>
										</td>
										<td>
											<label><span class="data_table_lab">ICCID：</span><span id="SIM_ICCID" ></span></label>
										</td>
										<td >
										</td>
									</tr>
								</table>
							</div>
						</div>
						</div>
						<!--tab页签 end-->
					</div>
				</div>
				
				
<jsp:include page="/pages/common/modal.jsp"></jsp:include>
<script type="text/javascript" src="pages/monitor/js/monitor_history_data.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
		var clientId = '<%=request.getParameter("clientId")%>';
		var packCode = '<%=request.getParameter("packCode")%>';
		history_data.init(clientId, packCode);
	});
</script>
</html>